<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>铂涛首页</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script type="text/javascript">
			function initBall(left,mid,right){
				function getWidth(ele){
					var ew = getComputedStyle(ele).width;
					return cw*parseInt(ew)/design_size;
				}
				function setWH(ele,n){
					ele.style.width = n+"px";
					ele.style.height = n+"px";
				}
				var design_size = 1920;
				//1.获取当前屏幕宽度
				var cw = document.documentElement.clientWidth;
				//左球比例-1920 800
				var lp = left.previousElementSibling;
				var lw = getWidth(left);
				var lpw = getWidth(lp);
				setWH(left,lw);
				setWH(lp,lpw);
				//console.log(lw,lpw);
				//中球比例-1920 268
				var mp = mid.previousElementSibling;
				var mw = getWidth(mid);
				var mpw = getWidth(mp);
				setWH(mid,mw);
				setWH(mp,mpw);
				//右球比例-1920 965
				var rp = right.previousElementSibling;
				var rw = getWidth(right);
				var rpw = getWidth(rp);
				setWH(right,rw);
				setWH(rp,rpw);
			}
			
			window.onload=function(){
				function moveball(left,mid,right){
				var move_left = function(ele,n){
					ele.style.transition = "transform 0.82s";
					ele.previousElementSibling.style.transition="transform 0.8s";
					ele.previousElementSibling.style.transform = 'translate3d('+n+'px,0,0)';
					ele.style.transform = 'translate3d('+n+'px,0,0)';
				}
				var move_top = function(ele,n){
					ele.style.transition = "transform 0.82s";
					ele.previousElementSibling.style.transition="transform 0.8s";
					ele.previousElementSibling.style.transform = 'translate3d(0,'+n+'px,0)';
					ele.style.transform = 'translate3d(0,'+n+'px,0)';
				}
				
				//1.拿到水平方向的标尺
				var mid_x = mid.offsetLeft+0.5*mid.clientWidth;
				//2.确定左边的偏移量
				var ol = mid_x -left.clientWidth;
				move_left(left,ol)
				//3.确定右边偏移量
				var right_ml =  getComputedStyle(right).marginRight
				right_ml= parseInt(right_ml)*0.5;
				var or = right.offsetLeft - mid_x+right_ml;
//				console.log('or',or)
				move_left(right,-or)
				//4.解决垂直移动
				var mt = mid.offsetTop;
				var lt = left.offsetTop;
				//console.log(mt-lt);
				move_top(mid,(lt-mt)*0.5)
			}
			
			
			
			
			
			
var textlist = document.querySelectorAll(".text");
	var scrolltop=null;
	var queue = [];
	for(var i=0;i<textlist.length;i++){
		queue[i] = textlist[i];
	}
	var isscroll = true;
	function s(){
		scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
		if(isscroll && queue.length){
			if(scrolltop>textlist[0].offsetTop && scrolltop<textlist[1].clientHeight ){
				if(queue[0]==textlist[0]){
					isscroll=false;
					moveball(about_hotel_inner,link_inner,about_custom_inner);
					queue.shift();
					setTimeout(function(){
						isscroll=true;
					},2000)
				}
			}
			if(scrolltop>=textlist[1].offsetTop && scrolltop<textlist[1].offsetTop+1000){
				if(queue[0]==textlist[1] || queue[1]==textlist[1]){
					moveball(join_inner,link2_inner,arrow_inner);
					isscroll=false;
					queue.pop();
					setTimeout(function(){
						isscroll=true;
					},2000)
				}
			}
		}
		if(!queue.length){
			window.removeEventListener("scroll",s)
		}
	}
	window.addEventListener("scroll",s)
}
			
		</script>
	
	</head>
	<body>
		<div class="top">
			<div class="nav_top">
				<div class="nav">
					<div class="logo">
						<img src="images/log_03.png"/>
					</div>
					<div class="nav_txt">
						<ul>
							<li><a href="">关于集团</a></li>
							<li><a href="">品牌介绍</a></li>
							<li><a href="">Lifestyle Lab</a></li>
							<li><a href="">企业社会责任</a></li>
							<li><a href="">联系我们</a></li>
						</ul>
					</div>
				</div>
				<div class="introduce">
					<h1>连接美好体验</h1>
					<h2>LINK UP ALL GOODS</h2>
					<p>全球前五的中国酒店集团，从2005年7天酒店成立到2013年铂涛集团正式成立，多年来，专注体验消费领域，在中国</p>
					<p>酒店业首倡“品牌先行”理念，基于消费者的价值诉求，内心喜好来打造及运营品牌。</p>
					<p>铂涛以“连接美好体验”为使命，连接酒店、公寓、共享办公、 艺术公益平台等领域中具有独特调性的品牌，为 消费</p>
					<p>者构建一个丰富多彩的体验生活圈。</p>
				</div>
				<div class="nav_bot">
				<a href="#">
					<div class="button">
					了解详情
					</div>
				</a>
			</div>
			</div>
			
			<div class="text">
				<div id="rball"></div>
				<div id="lball"></div>
				<!--关于酒店-->
				<div class="about_hotel">
					
				</div>
				<div class="about_hotel_inner">
						<img src="images/icon_hotel.png"/>
						<h3>关于酒店</h3>
						<p>铂涛体验生活圈涵盖了近<em>20个品牌</em>，联合锦江拥有<em>1.4亿会员</em>，门店总数超<em>5600家</em>，覆盖全国<em>470多个城市</em>，并积极拓张亚洲、欧洲、非洲等市场
</p>
				</div>
				<!--连接-->
				<div class="link">
					
				</div>
				<div class="link_inner">
					<img src="images/icon_link.png"/>
					<h3>铂涛连接
<br>酒店与消费者</h3>
				</div>
				<!--关于消费者-->
				<div class="about_custom">
					
				</div>
				<div class="about_custom_inner">
						<img src="images/icon_cunstom.png"/>
						<h3>关于消费者</h3>
						<p>消费者会员可在多个体验型品牌间切换流动，<em>1.4亿会与员WeHotel连接，4大会员权益</em>致力为在旅途上的每一位住客，连接最美好的消费者体验。</p>
						<img src="images/custom.png" class="custom"/>
				</div>
			</div>
			
			<div class="text">
				<div id="bball"></div>
				<!--关于酒店-->
				<div class="join">
					
				</div>
				<div class="join_inner">
						<img src="images/icon_join.png"/>
						<h3>加盟铂涛</h3>
						<p>全球前五酒店集团，<em>连接品牌势能、会员数据、成熟体系、专业服务进行连接</em>，确保每一位投资加盟商获得高回报收益
</p>
				</div>
				<!--连接-->
				<div class="link link2">
					
				</div>
				<div class="link_inner link2_inner">
					<img src="images/icon_link.png"/>
					<h3>铂涛连接
<br>酒店与消费者</h3>
				</div>
				<!--箭头-->
				<div class="arrow">
					
				</div>
				<div class="arrow_inner">
						<img src="images/icon_arrow.png"/>
						<h3>铂涛给投资人的8大优势，<br />
助你投资加盟后，稳步发展
</h3>
						<p><em>一：强大品牌势能</em> <br />
近20个符合消费者内心喜好的品牌，品牌更具长期竞争力。
<br /><em>二：高额加盟回报</em><br />
预计平均30%年回报率，快至3年回本。
<br /><em>三：完备质量监控</em><br />
从酒店选址、建设到日常运营，十余年质控体系。
<br /><em>四：高会员输送率</em><br />
超1亿有效会员，超75%会员输送率。
</p>


						
				</div>
			</div>
			<script type="text/javascript">
							var about_hotel_inner=document.querySelector(".about_hotel_inner");
			var link_inner = document.querySelector(".link_inner");
			var about_custom_inner = document.querySelector(".about_custom_inner");
			
			var join_inner=document.querySelector(".join_inner");
			var link2_inner = document.querySelector(".link2_inner");
			var arrow_inner = document.querySelector(".arrow_inner");

				initBall(join_inner,link2_inner,arrow_inner);
				initBall(about_hotel_inner,link_inner,about_custom_inner);
			</script>
			<img src="images/bottom.jpg" class="bottom"/>
			
		</div>
		
		
	
	</body>
</html>
